<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<style>
  * {
    padding: 0;
    margin: 0;
  }
  .box {  
    background-color: yellow;
    display: flex; 
    /* 不行行 */
    /* flex-wrap: nowrap; */
    /* 换行 */
    flex-wrap: wrap;
    /* x */
    /* justify-content: space-between; */
    /* justify-content: space-around; */
    /* justify-content: space-evenly; */
    /* justify-content: center; */
    /* justify-content: flex-start; */
    /* justify-content: flex-end; */
    gap: 20px;
    /* align-items: center; */
    /* align-items: flex-start; */
    /* align-items: flex-end; */
    /* flex-direction: column;  */
  }
  .box div { 
    flex: 1;
    /* width: 100px;
    height: 100px; */
    background-color: pink;
    
    /* text-align: center; */
    /* line-height: 100px; */
  }
  .item {
    flex: 2 !important;
  }
  /* float */
  /* 定位 */
  /* 弹性 | 网格(不推荐) */
  /* .title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    border-bottom: 10px dashed red;
  } */
</style>
<body>
  <div class="box">
    <!-- <div class="title">
      <span>聘雇后</span>
      <div>
        <span>更多</span>
        <span>></span>
      </div> 
    </div> -->
    <!-- <div style="width: 50px;height: 50px; line-height: 50px;">2222</div> -->
    <!-- <div>3333</div>
    <div>7777</div>  -->
    <div>3333</div>
    <div>3333</div>
    <div>3333</div>
    <div>4444</div>
    <!-- <div style="width: 50px;height: 50px; line-height: 50px;">5555</div> -->
   <div>6666</div>
    <div class="item">7777</div>
    <div>7777</div>
    <div>7777</div>
    <div>7777</div>
    <div>7777</div>
    <div>7777</div>
    <div>7777</div>
    <div>7777</div>
    <div>11</div>
    <div>22</div>
    <div>33</div>
    <div>44</div>
    <div>55</div>
    <div>66</div> 
  </div>
</body>
</html>